<template>
  <div class="withdrawal">
    <div class="body_input">
      <div>
        <div class="user_title">真实姓名</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入开户人姓名"
            v-model="UserInformation.realname"
            maxlength="8"
            disabled
          />
        </div>
      </div>
    </div>
    <div class="body_input">
      <div>
        <div class="user_title">身份证号</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入身份证号"
            v-model="UserInformation.cardId"
            disabled
          />
        </div>
      </div>
    </div>

    <div class="body_input">
      <div class="BankAddress">
        <div class="user_title"><span>*</span>银行卡号</div>
        <div class="user_name">
          <input
            type="number"
            v-if="cardNum_fa"
            placeholder="请输入银行卡号"
            v-model="cardNum"
            @blur="cardNum_"
          />
          <input type="number" v-else :placeholder="opening_bank" disabled />
          <span
            v-if="!opening_bank_is"
            :class="!opening_bank_is ? 'isback_hong' : ''"
            >{{ opening_bank_ }}</span
          >
          <div v-if="!cardNum_fa" id="img_close" @click="close_img">
            <img :src="require('@/assets/images/other/cha2.jpg')" alt="" />
          </div>
          <input
            type="text"
            v-if="ManualInput"
            placeholder="识别失败请手动输入银行名称"
            v-model="opening_bank_.bank"
          />
        </div>
      </div>
    </div>
    <!-- 6226222710316592 -->
    <!-- <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>开户银行</div>
        <div class="user_name">
          <input type="text" placeholder="输入银行卡号自动识别" v-model="opening_bank_" readonly="readonly" />
        </div>
      </div>
    </div> -->
    <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>开户支行</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入开户行"
            v-model="qs_opening_bank"
            maxlength="30"
          />
        </div>
      </div>
    </div>
    <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>手机号码</div>
        <div class="user_name">
          <input
            type="number"
            placeholder="请输入手机号"
            v-model="cellPhonenumber"
            @blur="isPhone(cellPhonenumber)"
          />
        </div>
      </div>
    </div>

    <div class="body_input">
      <div>
        <div class="user_title">支付宝号</div>
        <div class="user_name">
          <input
            type="number"
            placeholder="请输入支付宝号"
            v-model="AlipayNumber"
          />
        </div>
      </div>
    </div>
    <div
      class="withdrawal_btn"
      :class="exitsVal ? 'color_blue withdrawal_btn' : 'withdrawal_btn'"
      @click.stop="okAddCardClick"
    >
      确认绑卡
    </div>

    <div class="beCareful">
      <span>注意：</span>
      <span>1. 提现资料请勿随意填写，需正确填写以上资料。</span>
      <span
        >2. 银行卡、身份证号码必须与提现人真实姓名一致，否则提现不能到账。</span
      >
      <span>3. 请勿将账号绑定他人的姓名和卡号，绑定后不能修改。</span>
    </div>
    <!-- <div class="result">
      <u>积分规则说明</u>
    </div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { Toast } from "vant"
import { useRouter, useRoute } from 'vue-router'
import { userGetbankname, userWithdrawText, userEditBankCard, userAddBankCard } from '@/api/recharge'
import { getCookie } from '@/util/cookie'
import 'vant/lib/index.css'
export default defineComponent({
    setup() {
        const router: any = useRouter()
        const route: any = useRoute()
        const data = reactive<Record<string, any>>({
            name: "", //开户人
            cardNum: "", //银行卡号0
            opening_bank: "", //开户行
            province_name: "", //开户省份地点
            city_name: "", //开户城市地点
            IDnumber: "", //身份证号
            cellPhonenumber: "", //手机号
            AlipayNumber: "", //支付宝号
            code_map: "",
            show: false,
            _model: "",
            title_qs: "",
            opening_bank_: "",
            qs_opening_bank: "",
            opening_bank_is: false,
            ifExist: "",
            UserInformation: {}, //开局获取的用户信息
            cardNum_fa: true, //离开银行卡能否操作
            ManualInput: false, //是否需要手动输入
            // ManualInput_: "", //手动输入的值
            userId: getCookie("userId"),
            token: getCookie("token"),
        })
        const exitsVal = computed(() => {
            return Number(Boolean(data.cardNum)) &&
                Number(Boolean(data.opening_bank_is)) &&
                Number(Boolean(data.opening_bank_.bank)) &&
                Number(Boolean(isPhone(data.cellPhonenumber)))
        })
        if (!data.token) {
            router.push({
                path: "/login",
                query: {
                    reductName: route.path
                }
            });
        }
        const close_img = (): void => {
            data.cardNum_fa = !data.cardNum_fa;
        }
        const cardNum_ = async (): Promise<void> => {
            if (!data.cardNum) {
                Toast("银行卡号不能为空")
                return
            }
            const arys = {
                userId: data.userId,
                token: data.token,
                cardNum: data.cardNum,
            } //参数
            const dataRes = await userGetbankname(arys)
            if (dataRes.data.status === 0) {
                if (dataRes.data.result.bank) {
                    data.ManualInput = false;
                    // console.log(res.data.result);
                } else {
                    data.ManualInput = true;
                }
                    data.cardNum_fa = false;
                    data.opening_bank_is = true;
                    data.opening_bank_ = dataRes.data.result;
                    let str: any = "";
                    str = +data.cardNum.substring(data.cardNum.length - 4);
                    data.opening_bank = dataRes.data.result.bank + "(尾号" + str + ")";
            } else {
                if (dataRes.data.result.bank) {
                    data.ManualInput = true;
                } else {
                    data.opening_bank_is = false;
                    data.opening_bank_ = dataRes.data.text;
                }
            }
        }
        const isPhone = (value: string): boolean => {
            const patrn = /^(((1[3456789][0-9]{1})|(15[0-9]{1}))+\d{8})$/
            if (!patrn.test(value) || value === '') {
                Toast("手机号格式不正确");
                return false
            } else {
                return true
            }
        }
        const withdrawText = async (): Promise<void> => {
            let arys = {
                userId: data.userId,
                token: data.token,
            }; //参数
            const dataRes = await userWithdrawText(arys)
            if (dataRes.data.status === 0) {
                data.UserInformation = dataRes.data.result;
            } else {
                Toast(dataRes.data.text);
            }
        }
        const okAddCardClick = async (): Promise<void> => {
            if (!exitsVal.value) {
                console.log("三个必传条件不成立");
                return 
            }
            if (!data.cardNum) {
                Toast("银行卡号不能为空");
                return 
            }
            if (!data.qs_opening_bank) {
                Toast("开户地点不能为空");
                return 
            }
            if (!data.cellPhonenumber) {
                Toast("手机号不能为空");
                return 
            }
            //添加成功银行卡
            const arys = {
                userId: data.userId,
                token: data.token,
                cardNum: data.cardNum,
                bank_name: data.opening_bank_.bank,
                opening_bank: data.qs_opening_bank,
                mobile: data.cellPhonenumber,
                alipay_no: ''
            }; //参数
            if (data.AlipayNumber) {
                arys.alipay_no = data.AlipayNumber;
            }
            let dataRes;
            if (data.UserInformation.bankId) {
                dataRes = await userEditBankCard(arys)
            } else {
                dataRes = await userAddBankCard(arys)
            }
            if (dataRes.data.status == 0) {
                Toast(dataRes.data.text);
                router.push({
                    path: "/withdrawal_new"
                });
            } else {
                Toast(dataRes.data.text);
            }
        }
        withdrawText()
        return {
            okAddCardClick,
            cardNum_,
            close_img,
            isPhone,
            exitsVal,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="less" scoped>
@import './WithdrawalPush.less';
</style>
